<template>
	<view class="main">
		<view class="bg">
			<!-- <view class="flex flex-jc-sb" style="margin: 0 24rpx;line-height: 180rpx;font-weight: bold;font-size: 32rpx;">
				<view><i-icon icon="icondingdandengdai"></i-icon><text style="margin-left: 15rpx;">{{list.status}}</text></view>
				<view>{{list.time}}</view>
			</view> -->

		</view>
		<view class="pos">
			<!-- 信息卡片 -->
			<view class="card">
				<!-- 标题 -->
				<view class="card-title flex flex-ai-c">
					<view>
						<image :src="list.headportrait" style="width: 52rpx;border-radius: 50%;height: 52rpx;"></image>
					</view>
					<view class="name">{{list.account_name}}</view>
					<!-- <view class="flex number">
						<view>15821582345</view>
						<view><i-icon icon="iconlianxi" color="rgb(251,177,3)" size="30rpx"></i-icon></view>
					</view> -->
				</view>

				<!-- 内容 -->
				<view class="content" style="line-height: 50rpx;">
					<view class="flex">
						<view class="content-title">
							<image :src="list.brand_img"></image>
						</view>
						<view style="color: #999999;margin-left: 20rpx;">车型：</view>
						<view style="width: 65%;">{{list.car_type_name}}{{list.configuration_name}}</view>
					</view>
					<view class="flex flex-ai-c flex-jc-sa contact">
						<view @click="concat(list)">
							<i-icon icon="iconxiaoxi" size="35rpx"></i-icon><text style="margin-left: 10rpx;">联系买家</text>
						</view>
						<view @click="phone(list.mobile)">
							<i-icon icon="icondianhua" type="multiple" size="32rpx"></i-icon><text style="margin-left: 10rpx;">致电买家</text>
						</view>
					</view>
				</view>
			</view>


			<view class="card">

				<view class="flex flex-jc-sb type">
					<view>服务类型</view>
					<!-- <view>{{item.maintenance_type_name}}</view> -->
				</view>
				<view v-for="(item,index) in list.maintenancetype" :key='item.id'>
					<view class="content wash" style="border: 0;">
						<view style="border-bottom: 2rpx solid #EEEEEE;padding-bottom: 20rpx;">
							<view style="font-weight: bold;">{{item.maintenance_type_name}}</view>
							<view v-for="(item2,i) in item.goodsDetailslist" :key='item2.goods_id' class="flex card-box flex-jc-sb">
								<view class="card-carImg">
									<image :src="item2.goods_pic"></image>
								</view>
								<view class="cu flex flex-jc-sb flex-dir-c">
									<view>{{item2.goods_name}}</view>
									<view class="flex flex-jc-fe flex-ai-c price">
										<view>￥{{item2.goods_price}}</view>
										<view>x{{item2.count}}</view>
									</view>
								</view>
							</view>

						</view>

					</view>
				</view>
				<!-- 保养 -->
				<view class="content maintain">

					<!-- 列表项 -->
					<!-- <view>
							<view style="font-weight: bold;">小保养	</view>
							<view class="flex card-box flex-jc-sb wash" v-for="(item,index) in list.servicelist" :key='item.id' >
								<view class="card-carImg">
								
									<image></image>
								</view>
								<view class="cu flex flex-jc-sb flex-dir-c">
									<view style="width: 360rpx;" class="cu-title">
								
										<view>{{item.service_name}}</view>
									</view>
									<view class="flex flex-jc-sb">
										<view class="flex">
											
											<view class="synthesis" v-show="item.isHc">全合成</view>
											
											<view class="displacement">4L</view>
										</view>
										<view class="flex flex-jc-fe flex-ai-c price">
											<view>￥{{item.service_price}}</view>
											<view>x{{item.service_count}}</view>
										</view>
									</view>
									
								</view>
							</view>
						</view> -->

					<!-- 其他费用 -->
					<view class="cost" v-for="(item3,ind) in list.servicelist" :key="ind">
						<view class="flex flex-jc-sb flex-ai-c wash hours">
							<view class="hours-price">{{item3.service_name}}</view>
							<view class="flex price">
								<view>￥{{item3.service_price}}</view>
								<view>x{{item3.service_count}}</view>
							</view>
						</view>

						<!-- 优惠券 -->
						<view class="flex flex-jc-sb flex-ai-c wash hours">
							<view class="flex flex-ai-c">
								<i-icon icon="iconfapiao" color="#FDD421" size="38rpx"></i-icon>
								<view class="discount">优惠券</view>
							</view>
							<view class="flex">
								<view class="coupon">{{list.coupon_name}}</view>
								<view class="discount money">-￥{{ list.discounts }}</view>
							</view>
						</view>

						<view class="flex flex-jc-fe flex-ai-c total">
							<view style="margin-right: 40rpx;">已优惠: <text class="money">￥{{list.discounts}}</text></view>
							<view>合计: <text class="money" style="font-size: 35rpx;">￥{{list.amount_payable}}</text></view>
						</view>

					</view>
				</view>
			</view>

			<view class="card">
				<!-- 订单信息 -->
				<view class="info">
					<!-- 标题 -->
					<view class="wash" style="margin-left: 24rpx;padding: 24rpx 0;color: #333333;">
						<view>订单信息</view>
					</view>

					<!-- 内容 -->
					<view style="margin: 0 25rpx;line-height: 60rpx;">
						<!-- 订单号 -->
						<view class="flex flex-jc-sb">
							<view class="info-right">订单号：</view>
							<view class="flex flex-ai-c">
								<view>{{list.order_no}}</view>
								<view class="copy" @click="copy">复制</view>
							</view>
						</view>
						<!-- 时间 -->
						<view class="flex flex-jc-sb">
							<view class="info-right">下单时间：</view>
							<view>{{ list.addtime }}</view>
						</view>
						<!-- 支付 -->
						<view class="flex flex-jc-sb">
							<view class="info-right">支付方式：</view>
							<view>{{list.pay_type | formatStoreType}}</view>
						</view>
					</view>
				</view>
			</view>

			<!-- btn -->
			<view class="footer">
				<view class="footer-bg flex flex-ai-c">
					<view class="btn flex flex-jc-c" @click="goPage">
						<view>确认核销</view>
					</view>
				</view>
			</view>


		</view>
		<!-- 弹框提示 -->
		<u-popup v-model="tipShow" mode="center" :mask="false" width="540">
		  <view class="popup-content">
		    <view class="title">温馨提示</view>
		    <view class="content"
		      >您的门店无该车辆到店记录和订单， 请通过手机号码创建到店记录</view
		    >
		    <view class="btn-box" @click="okey()">
					我知道了
		    </view>
		  </view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script src='./writeOff.js'></script>

<style lang="scss" scoped>
	@import './writeOff.scss';
</style>
